<template>
  <div class="app-container">
    <el-card :body-style="{ padding: '20px' }">
      <el-steps :space="400" :active="1" finish-status="success" align-center>
        <el-step title="管理员帐号登录"></el-step>
        <el-step title="公众号授权登录"></el-step>
        <el-step title="同步公众号数据"></el-step>
        <el-step title="接入成功"></el-step>
      </el-steps>

      <div class="tip-content">
        <p>
          授权之前，请确认：
        </p>
        <p>
          1、您有一个正常使用的微信公众号&nbsp&nbsp&nbsp&nbsp2、已开启公众号安全助手&nbsp&nbsp&nbsp&nbsp<el-link href="https://element.eleme.io" target="_blank" type="success" class="el-link-open">如何开启?</el-link> &nbsp&nbsp&nbsp&nbsp3、授权时建议勾选所有权限，避免影响使用
        </p>
      </div>

      <el-button type="success" icon="el-icon-wx" class="goto-auth-btn">
        <a :href="goto_url" target="_blank" referrerpolicy="origin">微信公众号授权登录</a>
      </el-button>
      <p class="tip-text">
        点击按钮进入微信公众号平台官方授权
      </p>
    </el-card>
  </div>
</template>

<script>
  import { Base64 } from 'js-base64';
  export default {
    name: "wxconfig",
    components: {},
    data() {
      return {
        goto_url:''
      };
    },
    created() {
      //解密参数
      const url = Base64.decode(this.$route.query.url)
      console.log("wxauth url")
      console.log(url)
      //设置按钮跳转连接地址
      this.goto_url = url;
    },
    methods: {

    }
  };
</script>
<style rel="stylesheet/scss" lang="scss">
  .tip-content {
    margin-top: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 25px;
    padding-right: 25px;
    background: #f6f8f8;
    border-radius: 2px;
  }
  .el-link-open {
    font-size: 16px;
  }
  .goto-auth-btn {
    color: #fff;
    margin-top: 20px;
    font-size: 15px;
  }
  .tip-text {
    color: #c1c3c6;
    font-size: 10px;
  }
</style>
